<template>
    <div class="summarize">
        <!-- 经营概况 Start -->
        <el-card shadow="never" class="!border-none">
            <template #header>
                <div class="header">经营概况</div>
            </template>
            <div class="pb-[16px] pt-[16px]">
                <el-row :gutter="20">
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/course_total_amount.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.salesAmount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">课程总收入</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/course_order_total_num.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.salesOrderCount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">课程订单总数</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-[20px] md:mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/refund_order_amount.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.refundedAmount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">退款订单总额</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-[20px] md:mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/refund_order_num.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.refundCount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">退款订单总数</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 经营概况 Start -->

        <!-- 用户概况 Start -->
        <el-card shadow="never" class="mt-4 !border-none">
            <template #header>
                <div class="header">用户概况</div>
            </template>
            <div class="pb-[16px] pt-[16px]">
                <el-row :gutter="20">
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/user_total_amount.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.totalUserAmount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">用户总资产（元）</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/user_total_peopel.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.userCount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">用户总人数</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-[20px] md:mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/total_visit.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.totalUserVisitCount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">总访问量</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 用户概况 End -->

        <!-- 充值概括 Start -->
        <el-card shadow="never" class="mt-4 !border-none">
            <template #header>
                <div class="header">充值概括</div>
            </template>
            <div class="pb-[16px] pt-[16px]">
                <el-row :gutter="20">
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/total_charge_amount.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.rechargeAmount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">累计充值金额</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img
                                style="width: 60px; height: 60px"
                                src="@/assets/images/finance/total_charge_num.png"
                            />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-4xl font-medium">
                                    {{ financeData.rechargeOrderCount || '0.00' }}
                                </div>
                                <div class="text-tx-regular text-xs">累计充值次数</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 充值概括 End -->
        <layout-footer></layout-footer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { apiFinanceDataCenter } from '@/api/finance/finance'
import { number } from 'echarts/core'
import LayoutFooter from '@/layout/components/footer.vue'

/** Interface Start **/
interface FinanceObj {
    salesAmount: number //	float	课程总收入
    salesOrderCount: number //	int	课程总订单数
    refundedAmount: number //	float	退款总金额
    refundCount: number //	int	退款订单总数
    totalUserAmount: number //	float	用户总资产
    userCount: number //	int	用户总人数
    totalUserVisitCount: number //	int	总访问量
    rechargeAmount: number //	float	累计充值金额
    rechargeOrderCount: number //	int	累计充值次数
    award_sum: number //	float	累计赠送金额
}
/** Interface End **/

/** Data Start **/
const financeData = ref<FinanceObj>({
    salesAmount: 0,
    salesOrderCount: 0,
    refundedAmount: 0,
    refundCount: 0,
    totalUserAmount: 0,
    userCount: 0,
    totalUserVisitCount: 0,
    rechargeAmount: 0,
    rechargeOrderCount: 0,
    award_sum: 0
})
/** Data End **/

/** Methods Start **/
const initFinanceDataCenter = async (): Promise<void> => {
    try {
        financeData.value = await apiFinanceDataCenter()
    } catch (error) {
        console.log('初始化财务概括=>', error)
    }
}
/** Methods End **/

/** Life Cycle Start **/
initFinanceDataCenter()
/** Life Cycle End **/
</script>

<style lang="scss" scoped>
.header {
    font-size: 14px;
    font-weight: 500;
    padding-left: 10px;
    border-left: 3px solid #4a5dff;
}
</style>
